<template>
  <div class="app-container">
    <!-- 生成代码数据表信息 -->
    <el-dialog title="数据表信息" :visible.sync="visible" :close-on-click-modal="false" width="800px">
      <el-form ref="dataForm" :rules="rules" :model="formData" label-position="right" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据库类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择" disabled style="width: 100%" class="filter-item">
                <el-option v-for="item in dbTypeOptions" :key="item.code" :label="item.text" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据库名称" prop="name">
              <el-input v-model="formData.name" readonly placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="主机" prop="host">
              <el-input v-model="formData.host" readonly placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input v-model="formData.port" readonly placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <!--        <el-row>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="用户" prop="username">-->
        <!--              <el-input v-model="formData.username" readonly placeholder="请输入" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="密码" prop="password">-->
        <!--              <el-input v-model="formData.password" type="password" readonly placeholder="请输入" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->

        <el-row>
          <el-col :span="24">
            <el-form-item label="数据表" prop="tableName">
              <el-select v-model="formData.tableName" filterable placeholder="请选择" style="width: 100%" class="filter-item">
                <el-option v-for="item in tableList" :key="item.tableName" :label="item.tableComment" :value="item.tableName">
                  <span style="float: left">{{ item.tableComment }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.tableName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="parent">
              <span slot="label">
                <el-tooltip content="示例：cn.flying.cloud" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                父包路径
              </span>
              <el-input v-model="formData.parent" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="moduleName">
              <span slot="label">
                <el-tooltip content="示例：system.user" placement="top">
                  <i class="el-icon-question" />
                </el-tooltip>
                所属模块
              </span>
              <el-input v-model="formData.moduleName" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="代码风格" prop="codeStyle">
              <el-radio v-model="formData.codeStyle" label="MP">Mybatis-Plus</el-radio>
              <el-radio v-model="formData.codeStyle" label="MB">Mybatis</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者" prop="author">
              <el-input v-model="formData.author" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="去掉前缀" prop="prefix">
              <el-input v-model="formData.prefix" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="handleClose">
          取消
        </el-button>
        <el-button type="primary" icon="el-icon-check" @click="handleGenerate">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTableList, handleGenerate } from './api'
import waves from '@/directive/waves'

export default {
  // 当前页面名称（组件）
  name: 'CodeForm',
  // 引用组件
  components: {},
  directives: { waves },
  filters: {},
  // props属性
  props: {
    codeFormParams: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 是否显示弹出层
      visible: false,
      // 弹出层状态
      state: '',
      // 弹出层标题
      title: {
        update: '修改',
        create: '新增'
      },
      // 表单对象
      formData: {},
      // 表信息下拉项
      tableList: [],
      statusOptions: [{ code: 'Y', text: '启用' }, { code: 'N', text: '禁用' }],
      // serviceNameOptions: [{ code: 'system', text: '系统管理服务' }],
      dbTypeOptions: [{ code: 'MySql', text: 'MySql' }, { code: 'Oracle', text: 'Oracle' }, { code: 'PostgreSQL', text: 'PostgreSQL' }],
      // 表单校验规则
      rules: {
        tableName: [{ required: true, message: '数据表不能为空', trigger: 'change' }],
        author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
        parent: [{ required: true, message: '父包路径不能为空', trigger: 'blur' }],
        moduleName: [{ required: true, message: '所属模块不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    init(id) {
      this.handleRestFormData()
      this.visible = this.codeFormParams.visible
      this.formData = this.codeFormParams.formData
      this.formData.codeStyle = 'MP'

      getTableList(id).then((res) => {
        this.tableList = res.data
      })
    },
    // 重置表单
    handleRestFormData() {
      this.formData = {
        serviceName: undefined,
        type: undefined,
        name: undefined,
        host: undefined,
        port: undefined,
        username: undefined,
        password: undefined,
        tableName: undefined,
        author: undefined,
        parent: undefined,
        moduleName: undefined,
        codeStyle: undefined,
        prefix: undefined
      }
    },
    // 生成代码
    handleGenerate() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleGenerate(this.formData).then(res => {
            this.$parent.handleCodeView({ visible: this.visible, tabData: res.data })
            this.visible = false
          })
        }
      })
    },
    // 关闭弹出层
    handleClose() {
      this.handleRestFormData()
      this.visible = false
    }
  }
}
</script>
